<template>
	<!-- 会员管理 -->
	<div id="tops">
		<div class="Box">
			<el-header class="Header">
				<div class="inpt">
					<el-select v-model="oStatus" placeholder="请选择用户状态">
						<el-option v-for="item in userStatus" :key="item.status" :label="item.label" :value="item.status">
						</el-option>
					</el-select>
					<el-select v-model="oLevel" placeholder="请选择用户会员等级">
						<el-option v-for="item in userLevel" :key="item.level" :label="item.label" :value="item.level">
						</el-option>
					</el-select>
					<el-select v-model="oGender" placeholder="请选择用户会员性别">
						<el-option v-for="item in gender" :key="item.gender" :value="item.gender" :label="item.label">
						</el-option>
					</el-select>
					<el-input placeholder="请输入用户id" v-model="oInput" clearable></el-input>
					<el-input placeholder="请输入昵称" v-model="name" clearable></el-input>
					 <el-button type="primary" @click="list" icon="el-icon-search" style="width: 120px; height: 40px; margin-left: 10px;" v-insert="['system:user:query']">查找</el-button>
				</div>
				<el-row>
					 <el-button type="primary" @click="amend()" icon="el-icon-edit" style="margin-top: 20px; margin-left: 10px;" v-insert="['system:user:create']">添加用户</el-button>
				</el-row>
			</el-header>

			<el-dialog :title="title" :visible.sync="butt" :before-close="handleClose" style="margin-top: 150px;">
				<el-form :model="form" :rules="rules" status-icon ref="form">
					<el-form-item label="用户昵称" :label-width="formLabelWidth" prop="nickname">
						<el-input v-model="form.nickname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户手机号" :label-width="formLabelWidth" prop="phone">
						<el-input v-model="form.phone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">
						<el-input v-model="form.password" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户性别 " :label-width="formLabelWidth" prop="gender">
						<el-select v-model="form.gender" placeholder="请选择">
							<el-option v-for="item in gender" :key="item.gender" :value="item.gender" :label="item.label">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="用户等级" :label-width="formLabelWidth" prop="level">
						<el-select v-model="form.level" placeholder="请选择">
							<el-option v-for="item in userLevel" :key="item.level" :value="item.level" :label="item.label">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="用户状态" :label-width="formLabelWidth" prop="status">
						<el-select v-model="form.status" placeholder="请选择">
							<el-option v-for="item in userStatus" :key="item.status" :label="item.label" :value="item.status">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer">
					<el-button @click="cancel()">取 消</el-button>
					<el-button type="primary" @click="demil(form)">确 定</el-button>
				</div>
			</el-dialog>

			<el-main class="Main">
				<template>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column align="center" label="用户Id" min-width="100" sortable>
							<template slot-scope="scope">
								{{scope.row.id}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="昵称" min-width="100">
							<template slot-scope="scope">
								{{scope.row.nickname}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="手机号码" min-width="120">
							<template slot-scope="scope">
								{{scope.row.phone}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="性别" min-width="100">
							<template slot-scope="scope">
								<el-tag>
									{{scope.row.gender == 1 ? '女' : '男'}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" label="会员等级" min-width="100">
							<template slot-scope="scope">
								<el-tag>
									{{scope.row.level == 1 ? 'VIP会员' : '普通会员'}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" label="生日" min-width="100">
							<template slot-scope="scope">

							</template>
						</el-table-column>
						<el-table-column align="center" label="状态" min-width="100">
							<template slot-scope="scope">
								<el-tag>
									{{scope.row.status == 1 ?  '激活' : '冻结'}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" label="上次登入时间" min-width="100">
							<template slot-scope="scope">
								{{getYMDHMS(scope.row.gmtLastLogin)}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="上次登入Ip" min-width="100">
							<template slot-scope="scope">
								{{scope.row.lastLoginIp}}
							</template>
						</el-table-column>
						<el-table-column prop="address" align="center" label="地址" min-width="230">
							<template slot-scope="scope">
								<el-button type="primary" v-text="scope.row.status==1?'冻结':'激活'" size="small" @click="state(scope.row.id,scope.row.status)" v-insert="['system:user:update']"></el-button>
								<el-button type="primary" @click="update(scope.row)" size="small" v-insert="['system:user:update']">编辑</el-button>
								<el-button type="danger" @click="del(scope.row)" size="small" v-insert="['system:user:delete']">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-main>
			<el-header class="buttom">
				<div class="block">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
					 :page-sizes="[10, 20, 30, 40,50,100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>
			</el-header>
		</div>
	</div>
</template>

<script>
	import {
		Membershiplist,
		Userstatus,
		edit,
		deletes
	} from '../../api/usermanage.js'
	export default {
		data() {
			var validateWord = (rule, value, callback) => {
				const reg = /^[0-9a-zA-Z$./]{8}/
				if (!value) {
					callback(new Error('请输入密码'))
				} else if (value < 6 || value > 18 || !reg.test(value)) {
					callback(new Error('密码长度应为6~18位数字和字母'))
				} else {
					callback()
				}
			}
			var validatePhone = (rule, value, callback) => {
				const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!value) {
					callback(new Error('手机号不能为空'))
				} else if (!reg.test(value)) {
					callback(new Error('手机号格式不正确'))
				} else {
					callback()
				}
			}
			var validateName = (rule, value, callback) => {
				if (!value) {
					callback(new Error('用户昵称不能为空'))
				} else {
					callback()
				}
			}
			var validateGender = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请选择用户性别类型'))
				} else {
					callback()
				}
			}
			var validateLevel = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请选择用户会员等级状态'))
				} else {
					callback()
				}
			}
			var validateStatus = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请选择用户状态'))
				} else {
					callback()
				}
			}
			return {
				formLabelWidth: '120px',
				title: '',
				page: 1,
				count: null,
				limit: 20,
				tableData: [],
				name: '',
				oInput: '',
				oStatus: '',
				oGender: '',
				oLevel: '',
				butt: false,
				gender: [{
						gender: 1,
						label: '女'
					},
					{
						gender: 2,
						label: '男'
					},
					{
						gender: null,
						label: '全部'
					}
				],
				userStatus: [{
						status: 0,
						label: '冻结'
					},
					{
						status: 1,
						label: '激活'
					},
					{
						status: null,
						label: '全部'
					}
				],
				userLevel: [{
						level: 0,
						label: '普通会员'
					},
					{
						level: 1,
						label: 'VIP会员'
					},
					{
						level: null,
						label: '全部'
					}
				],
				form: {
					nickname: '',
					phone: '',
					password: '',
					level: '',
					gender: '',
					status: '',
					birthday: ''
				},
				rules: {
					password: [{
						required: true,
						validator: validateWord,
						trigger: 'blur'
					}],
					nickname: [{
						required: true,
						validator: validateName,
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						validator: validatePhone,
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						validator: validateGender,
						trigger: 'blur'
					}],
					level: [{
						required: true,
						message: '请选择用户会员等级',
						trigger: 'change'
					}],
					status: [{
						required: true,
						message: '请选择用户状态',
						trigger: 'change'
					}]
				},
				frame: ''
			}
		},
		created() {
			this.list()
		},
		methods: {
			list() {
				const listed = {
					nickname: this.name,
					pageNo: this.page,
					limit: this.limit,
					id: this.oInput,
					level: this.oLevel,
					gender: this.oGender,
					status: this.oStatus
				}
				Membershiplist(listed).then((resspose) => {
					console.log(resspose)
					this.tableData = resspose.data.data.items
					this.count = resspose.data.data.total
				})
			},
			// 状态
			state(id, status) {
				const params = {
					userId: id,
					status: (status == 1 ? 0 : 1)
				}
				Userstatus(params).then((res) => {
					console.log(res)
					if (res.data.errmsg == '成功') {
						this.list()
						this.frame ? this.frame.close() : ''
						this.frame = this.$message({
							type: 'success',
							message: status == 1 ? '激活成功' : '冻结成功'
						})
					} else {
						this.$message.error({
							type: 'info',
							message: res.data.errmsg
						})
					}
				})
			},
			// 编辑
			update(e) { // 编辑
				console.log(e)
				this.form = e
				this.butt = true
				// this.$refs.form.resetFields()
			},
			// 确定编辑
			demil(rewq) {
				this.$refs.form.validate((valid) => {
					if (valid) {
						console.log(rewq, '456')
						edit(rewq).then((ressopse) => {
							console.log(ressopse, '789')
							if (ressopse.data.errno == 200 && ressopse.data.errmsg == '成功') {
								this.$message({
									type: 'success',
									message: '编辑成功'
								})
								this.butt = false
								this.list()
							} else {
								this.$message.error(resspose.data.errmsg)
							}
						}).catch((resspose) => {
							this.$message({
								type: 'warning',
								message: '修改失败!'
							})
							this.butt = false
						})
					}
				})
			},
			// 删除
			del(oide) {
				console.log(oide, '456789')
				this.$confirm(`确定 ${oide.nickname} 删除?'`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const schu = {
						id: oide.id,
						nickname: oide.nickname
					}
					console.log(schu, '456456456456789')
					deletes(schu).then((ressopse) => {
						this.$message({
							type: 'info',
							message: '删除成功!'
						})
						this.list()
					}).catch((resspose) => {
						this.$message({
							type: 'info',
							message: '删除失败!'
						})
						this.list()
					})
				})
			},
			handleSizeChange(val) {
				this.limit = val
				console.log(this.limit)
				this.list()
			},
			handleCurrentChange(val) { // 页面切换
				// let vals = val
				this.page = val
				this.list()
			},
			handleClose(done) { // 弹框插件提示
				this.$confirm('确认关闭?')
					.then(_ => {
						this.list()
						this.butt = false
						// this.$refs.form.resetFields()
					})
			},
			handleClose(done) { // 弹框插件提示
				this.$confirm('确认关闭？')
					.then(_ => {
						this.list()
						this.butt = false
						// this.$refs.form.resetFields()
					})
			},
			cancel() { // 弹框取消提示
				this.$confirm('是否取消？')
					.then(_ => {
						this.list()
						this.butt = false
						// this.$refs.form.resetFields()
					})
			},
			getYMDHMS(timestamp) {
				if (timestamp) {
					const time = new Date(timestamp)
					const year = time.getFullYear().toString().padStart(2)
					const month = (time.getMonth() + 1).toString().padStart(2)
					const date = time.getDate().toString().padStart(2, '0')
					const hours = time.getHours().toString().padStart(2)
					const minute = time.getMinutes().toString().padStart(2)
					const second = time.getSeconds().toString().padStart(2)
					return month + '月' + date + '日' + hours + '时' + minute + '分'
				} else {
					return '无'
				}
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
	}

	// 头部
	.Box {
		width: 100%;
		overflow: hidden;
		// height: 1000px;
	}

	// 表头
	.Header {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 90px !important;
		display: flex;
	}

	// 中间
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		// height: 200px;
		overflow-x: auto;
	}

	// 底部
	.buttom {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 130px !important;
	}

	.block {
		margin-top: 10px;
	}

	// 头部的input框
	.inpt {
		margin-top: 20px;
		float: left;
		z-index: 22;
		position: relative;
		// width: 100%; height: auto;
	}

	.inpt .el-input {
		width: 200px;
		// height: 600px;
		margin-left: 5px;
	}

	.el-icon-search {
		width: 100px;
		height: 33px;
		margin-left: 11px;
		// background-color: #0190FD;
	}

	.el-icon-search:hover {
		background-color: #41A6FE !important;
	}

	.el-select {
		margin: 0px 2px;
	}
</style>
